<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<!--<![endif]-->
<head>
    <meta charset="utf-8"/>
    <title>闪送-注册</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>
    <meta name="MobileOptimized" content="320"/>
    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>

    <!-- END GLOBAL MANDATORY STYLES -->
    <!-- BEGIN THEME STYLES -->
    <link th:href="@{/css/style-metronic.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/style.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/style-responsive.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/plugins.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/default.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/login-soft.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/custom.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/blue.css}" rel="stylesheet" type="text/css"/>
    <!-- END THEME STYLES -->
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}"/>
    <script th:src="@{/js/jquery-3.5.1.js}" type="text/javascript"></script>
    <script th:src="@{/layer/layer.js}" type="text/javascript"></script>
    <script th:src="@{/js/jquery.validate.min.js}"></script>
    <style>
        #captcha_pic {
            border-radius: 0px;
            cursor: pointer;
            position: absolute;
            z-index: 1;
            /*right: 10;*/
            top: 0;
            line-height: 34px;
        }

        #captcha_link {
            margin-left: 90px;
            font-size: 12px;
            line-height: 34px;
            vertical-align: top;
            /*zoom:1;*/
        }

        .help-block {
            margin-top: 0px;
            margin-bottom: 0px;
            font-size: 9px;
        }

        #captcha {
            width: 160px;
        }
    </style>
    <script>
        $(function () {
            $("#form1").validate({
                rules: {
                    account: {
                        required: true,
                        rangelength: [5, 15]
                    },
                    password: {
                        required: true,
                        rangelength: [5, 15]
                    },
                    phoneNum: {
                        required: true,
                        rangelength: [11, 11]
                    },
                    repassword: {
                        equalTo: "#password"
                    },
                    putCheckcode: {
                        required: true,
                    }

                },
                messages: {
                    account: {
                        required: "账号不能为空",
                        rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
                    },
                    password: {
                        required: "密码不能为空",
                        rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
                    },
                    phoneNum: {
                        required: "手机号不能为空",
                        rangelength: $.validator.format("请输入正确的手机号"),
                    },
                    repassword: {equalTo: "密码不一致"},
                    putCheckcode: {required: "请输入验证码"}
                },
                /*errorPlacement: function(error, element) {
                    error.appendTo(element.parent());
                }*/
            });
        })

        function getCheckCode() {
            var phonenum = $("#phoneNum").val();
            if (phonenum == "") {
                layer.msg("请先输入手机号")
            } else {
                $.get("/user/checkcode/" + phonenum, function (data) {
                    if (data.code == 200) {
                        layer.msg("短信已发送，请注意查收")
                    } else if (data.code == 500) {
                        layer.msg("系统繁忙，请稍后再试")
                    }
                })
            }
        }
    </script>
</head>
<!-- BEGIN BODY -->
<body class="login">
<!-- BEGIN LOGO -->
<div class="logo">
    <a th:href="@{/}"> <img th:src="@{/images/logo.png}" alt="/"/> </a>
</div>
<!-- END LOGO -->
<!-- BEGIN LOGIN -->
<div class="content">
    <input id="token" name="token" value="OGVLTm1rV0lvd0hpSHEwc0s4R3kyY1c4MTQ4OTcxODIyMDA3MDQ=" type="hidden"/>
    <!-- BEGIN REGISTRATION FORM -->
    <form class="register-form" action="/user/register" method="post" novalidate="novalidate" th:object="${user}"
          id="form1">
        <h3>注册</h3>
        <div class="form-group">
            <label class="control-label visible-ie8 visible-ie9">手机号码</label>

            <div class="input-icon">
                <i class="icon-user"></i>
                <input class="form-control placeholder-no-fix" autocomplete="off" placeholder="手机号码" id="phoneNum"
                       name="phoneNum"
                       type="text" value="" th:field="*{phoneNum}"/>
                <span th:text="${msg}"></span>
            </div>
            <!--            <small id="register_mobile_error" class="color-red"></small>-->
        </div>

        <div class="form-group">
            <label class="control-label visible-ie8 visible-ie9">用户名</label>
            <!--            <div class="controls">-->
            <div class="input-icon">
                <i class="icon-ticket"></i>
                <input class="form-control placeholder-no-fix" id="account" name="account" autocomplete="off"
                       placeholder="用户名"
                       type="text"
                       th:field="*{account}"/>
            </div>
            <!--            </div>-->
        </div>

        <div class="form-group">
            <label class="control-label visible-ie8 visible-ie9">密码</label>
            <div class="input-icon">
                <i class="icon-lock"></i>
                <input class="form-control placeholder-no-fix" autocomplete="off" id="password" name="password"
                       placeholder="密码"
                       type="password" th:field="*{password}"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label visible-ie8 visible-ie9">确认密码</label>
            <div class="controls">
                <div class="input-icon">
                    <i class="icon-ok"></i>
                    <input class="form-control placeholder-no-fix" id="repassword" autocomplete="off" placeholder="确认密码"
                           name="repassword" type="password"/>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <input class="form-control" autocomplete="off" placeholder="短信验证码" name="putCheckcode" type="text"/>
                <span class="input-group-btn"> <button class="btn yellow" type="button" id="register_send_sms"
                                                       name="register_send_sms" onclick="javascript:getCheckCode()"> 获取短信验证码 </button> </span>
            </div>
            <div id="register_checkcode_error" class="color-red"></div>
        </div>
        <div class="form-actions">
            <button type="submit" id="register-submit-btn" class="btn btn-block theme-btn"> 同意以下协议并注册<i
                    class="m-icon-swapright m-icon-white"></i></button>
            <label class="margin-top-10"> <a href="userAgreement.html" target="_blank">《闪送服务•用户协议》</a><br/> </label>
        </div>
        <div class="create-account">
            <p>已有账户 ？&nbsp; <a th:href="@{/user/login}" id="gologin-btn">直接登录</a></p>
        </div>
    </form>
</div>

<div class="backstretch"
     style="left: 0px; top: 0px; overflow: hidden; margin: 0px; padding: 0px; height: 1000px; width: 1903px; z-index: -999999; position: fixed;">
    <img style="position: absolute; margin: 0px; padding: 0px; border: medium none; width: 1903px; height: 1427.76px; max-width: none; z-index: -999999; left: 0px; top: -449.378px;"
         th:src="@{/images/1.jpg}"/>
</div>
<!-- END BODY -->
</body>
</html>